// less里的变量 
// 定义一个变量 通过 @ 符号 
@w:100px;
@h:100px;
@b:1px solid red;
.box{
    width: @w;
    height: @h;
    border: @b;
}

// 1. 如果 变量作为 css名称 需要使用 @{变量名};
@myname:.box2;
@{myname}{
    width:100px;
    height:100px;
}

// 2.变量的运算 
// 运算的2边至少需要一个有单位的变量 ，那么less会自动加上单位 ；
// @a:10px;
// @b:20px;
// .box3{
//     width: @a+@b;
// }

// @c:20;
// @d:20px;
// .box3{
//     width: @c+@d;
// }

// @e:20;
// @f:20;
// .box3{
//     width: @e+@f;
// }

// 减  : 注意需要空格
// @a:100px;
// @b:50px;
// .box4{
//     width: @a - @b;
// }

// 乘
// @a:100px;
// @b:50px;
// .box4{
//     width: @a*@b;
// }

// 除 ：需要加上小括号 
@a:100px;
@b:10px;
.box4{
    width: (@a/@b);
}